<template>
    <div>
        <el-button type="primary" size="mini" round @click="dialogVisible = true">导入客户联系人</el-button>
        <el-dialog
                title="导入客户联系人excel文件"
                :visible.sync="dialogVisible"
                :before-close="handleClose"
                width="90%">

            <div>
                <div>
                    <span>预览导入:</span>
                    <el-upload
                            :show-file-list="false"
                            action="#"
                            :auto-upload="false"
                            style="display: inline-block"
                            accept=".xls,.xlsx"
                            :on-change="handleChange">
                        <el-button type="primary" round>选择excel文件</el-button>
                    </el-upload>
                    <el-button type="primary" @click="exportExcel" round>下载excel模板</el-button>
                </div>
                <div>
                    <span>excel文件直接导入:</span>
                    <el-upload
                            :show-file-list="false"
                            action="#"
                            :http-request="excelImport"
                            :disabled="btnFlag"
                            style="display: inline-block;">
                        <el-button
                                type="primary"
                                :loading="btnFlag"
                                round>选择excel文件</el-button>
                    </el-upload>
                </div>

                <div style="margin-top: 20px">
                    <el-table ref="excelTable" :data="rowList" stripe style="width: 100%" max-height="800"
                              @selection-change="selectionChange">
                        <el-table-column type="selection" fixed width="50">
                        </el-table-column>
                        <el-table-column type="index" show-overflow-tooltip label="序号" fixed width="50">
                        </el-table-column>

                        <el-table-column prop="customerName" label="客户名称" min-width="160">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.customerName" placeholder="请输入内容"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="primaryFlag" label="主要联系人" min-width="160">
                            <template slot-scope="scope">
                                <el-select v-model="scope.row.primaryFlag" placeholder="请选择">
                                    <el-option
                                            v-for="item in primaryFlagDict"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="姓名" min-width="160">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.name" placeholder="请输入内容"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="telephone" label="手机" min-width="160">
                            <template slot-scope="scope">
                                <el-input type="number" v-model="scope.row.telephone" placeholder="请输入内容"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sex" label="性别" min-width="160">
                            <template slot-scope="scope">
                                <el-select v-model="scope.row.sex" placeholder="请选择">
                                    <el-option
                                            v-for="item in sexDict"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column prop="department" label="部门" min-width="160">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.department" placeholder="请输入内容"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="position" label="职位" min-width="160">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.position" placeholder="请输入内容"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="email" label="邮箱" min-width="160">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.remarks" placeholder="请输入内容"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="address" label="联系地址" min-width="160">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.address" placeholder="请输入内容"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="linkmanDesc" label="描述" min-width="160">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.linkmanDesc" placeholder="请输入内容"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="remarks" label="备注" min-width="160">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.remarks" placeholder="请输入内容"></el-input>
                            </template>
                        </el-table-column>

                        <el-table-column fixed="right" label="操作" width="60">
                            <template slot-scope="scope">
                                <el-button @click="deleteRow(scope.row, scope.$index)" type="text"
                                           size="small">移除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>

            <span slot="footer">
                <el-button type="primary"
                           :loading="btnFlag"
                           round
                           @click="submitInfo">确认导入
                </el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {fetchDict, fetchDictMap} from '@/util/util';
    import {linkmanImport as infoImport, linkmanExcelImport as infoExcelImport} from '@/api/crm/import_info';

    export default {
        name: 'linkmanImport',
        data: function () {
            return {
                dialogVisible: false,
                closeFlag: false,
                btnFlag: false,
                // 行数据
                rowList: [{}],
                selectRowList: [],
                // 字典
                sexDict: [],
                primaryFlagDict: [],
            }
        },
        created() {
            // 字典初始化
            fetchDict('scm_sex', this.sexDict);
            fetchDict('scm_yes_no', this.primaryFlagDict);
        },
        computed: {
            sexMap: function () {
                if (this.sexDict.length) {
                    return fetchDictMap(this.sexDict);
                }
                return new Map();
            },
            primaryFlagMap: function () {
                if (this.primaryFlagDict.length) {
                    return fetchDictMap(this.primaryFlagDict);
                }
                return new Map();
            }
        },
        methods: {
            // 下载excel模板
            exportExcel() {
                window.open("/file/crm/客户联系人信息导入模板.xlsx");
            },
            handleClose(done) {
                if (this.closeFlag) {
                    this.$confirm('有未提交修改, 确认关闭?')
                        .then(_ => {
                            done();
                        })
                        .catch(_ => {
                        });
                } else {
                    done();
                }
            },
            //删除
            deleteRow(row, index) {
                this.rowList.splice(index, 1);
                if (this.rowList.length === 0) {
                    this.rowList.push({});
                    this.closeFlag = false;
                }
            },
            // 多选
            selectionChange(list) {
                this.selectRowList = list;
            },
            // 全选
            selectAll() {
                this.$refs.excelTable.toggleAllSelection();
            },
            // 检查是否可以导入
            checkFile(file){
                this.closeFlag = true;
                this.selectRowList = [];
                let name = file.name;
                let type = name.substring(name.lastIndexOf('.')).toLowerCase();
                if (!(type === '.xls' || type === '.xlsx')) {
                    this.$notify({
                        title: '提示',
                        message: '请选择Excel文件',
                    });
                    return true;
                }
                return false;
            },
            // 处理excel文件
            handleChange(file) {
                if(this.checkFile(file)){
                    return;
                }
                // 表头 属性转换
                this.$export.xlsx(file.raw).then(data => {
                    this.rowList = data.results.map((item) => {
                        return {
                            customerName: item['客户名称'],
                            primaryFlag: this.primaryFlagMap.get(item['主要联系人']),
                            name: item['姓名'],
                            telephone: item['手机'],
                            sex: this.sexMap.get(item['性别']),
                            department: item['部门'],
                            position: item['职位'],
                            email: item['邮箱'],
                            address: item['联系地址'],
                            linkmanDesc: item['描述'],
                            remarks: item['备注']
                        };
                    });
                    // 全选
                    this.selectAll();
                })
            },
            // excel文件直接导入
            excelImport(upload){
                let file = upload.file;
                this.btnFlag = true;
                if(this.checkFile(file)){
                    return;
                }
                let param = new FormData();
                param.append('file', file);
                infoExcelImport(param).then(res => {
                    this.$notify({
                        title: '导入结果提示',
                        dangerouslyUseHTMLString: true,
                        message: res.data.data.replace(/[|]/g, '<br/>'),
                        duration: 50000
                    });
                    this.closeFlag = false;
                }).catch(err => {
                    this.$notify({
                        title: '错误提示',
                        message: err,
                        duration: 50000
                    });
                }).finally(() => {
                    this.btnFlag = false;
                });
            },
            // 提交导入信息
            submitInfo() {
                if (this.selectRowList.length) {
                    this.btnFlag = true;
                    infoImport({
                        'linkmanList': this.selectRowList
                    }).then(res => {
                        this.$notify({
                            title: '导入结果提示',
                            dangerouslyUseHTMLString: true,
                            message: res.data.data.replace(/[|]/g, '<br/>'),
                            duration: 50000
                        });
                        this.closeFlag = false;
                    }).catch(err => {
                        this.$notify({
                            title: '错误提示',
                            message: err,
                            duration: 50000
                        });
                    }).finally(() => {
                        this.btnFlag = false;
                    });
                } else {
                    this.$notify({
                        title: '导入提示',
                        message: '请选择需导入的明细信息',
                    });
                }
            },
        }
    }
</script>

<style scoped lang="scss">

</style>
